<!-- onboarding.vue -->
<template>
	<view class="onboarding-container">
		<!-- Header Section -->
		<view class="header">
			<text class="header-title">新手须知</text>
			<view class="header-subtitle">{{newAward.introduce}}</view>
		</view>

		<!-- Tasks Section -->
		<view class="tasks-section">
			<text class="section-title">新手任务：</text>
			<view class="task-list">
				<!-- 绑定手机号-->
				<view class="task-item" :class="{'task-completed': bindPhone.completed ===1}">
					<view class="task-number">1</view>
					<view class="task-details">
						<text class="task-name">{{ bindPhone.name }}</text>
						<view class="task-status">
							每日获得查看联系方式次数+{{newAward.award.bindPhone }}
						</view>
					</view>
					<button class="task-reward"
						@click="handClick(bindPhone)">{{ bindPhone.completed === 1 ? '已完成':"去完成" }}</button>
				</view>
				<!-- 实名认证 -->
				<view class="task-item" :class="{'task-completed': realname.completed ===1}">
					<view class="task-number">2</view>
					<view class="task-details">
						<text class="task-name">{{ realname.name }}</text>
						<view class="task-status">
							每日获得查看联系方式次数+{{newAward.award.realname }}
						</view>
					</view>
					<button class="task-reward"
						@click="handClick(realname)">{{ realname.completed === 1 ? '已完成':"去完成" }}</button>
				</view>
				<!-- 邀请好友 -->
				<view class="task-item" :class="{'task-completed': invite.completed === 1}">
					<view class="task-number">3</view>
					<view class="task-details">
						<text class="task-name">{{ invite.name }}</text>
						<view class="task-status">
							每日获得查看联系方式次数+{{newAward.invite }}
						</view>
					</view>
					<button class="task-reward" open-type="share"
						@click="handClick(invite)">{{ invite.completed === 1 ? '已完成':"去完成" }}</button>
				</view>
				<!-- 职业认定 -->
				<view class="task-item" :class="{'task-completed': verify.completed === 1}">
					<view class="task-number">4</view>
					<view class="task-details">
						<text class="task-name">{{ verify.name }}</text>
						<view class="task-status">
							查看联系方式不限次数
						</view>
					</view>
					<button class="task-reward"
						@click="handClick(verify)">{{ verify.completed === 1 ? '已完成':"去完成" }}</button>
				</view>

				<!-- Progress Indicator -->
				<view class="progress-container">
					<text class="progress-text">任务进度：{{ completedTasks }}/4</text>
					<view class="progress-bar">
						<view class="progress-fill" :style="{width: `${(completedTasks / 4) * 100}%`}"></view>
					</view>
				</view>
			</view>
		</view>


		<!-- invite reward -->
		<view v-if="newAward.reward > 0 " class="tasks-section" style="margin-bottom: 50rpx;">
			<text class="section-title">邀请奖励：</text>
			<view class="header-subtitle">若您邀请了好友，每当她们有一个人完成职业认定，您将获得邀请奖励{{newAward.reward}}元,可在“我的”->“我的奖励”提现。</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				inviterCode: "",
				bindPhone: {
					name: '完成绑定手机号',
					completed: 0,
					toPage: "/pages/index/login"
				},
				realname: {
					name: '完成实名认证',
					completed: 0,
					toPage: "/pages/mine/userBind?type=1"
				},
				invite: {
					name: '邀请好友',
					reward: '每日获得查看联系方式按好友数增加',
					completed: 0
				},
				verify: {
					name: '完成职业认定',
					reward: '福利：查看联系方式次数不限',
					completed: 0,
					toPage: "/pages/service/certVerify"
				},
				newAward: {
					"award": {
						"bindPhone": '?',
						"register": '?',
						"realname": '?'
					},
					"invite": '?',
					"bindPhone": 0,
					"realname": 0,
					"verify": 0,
					"reward": 0,
					"introduce": "大厅的任务来源于各地家政公司老师发布的订单。本小程序是一个需求信息共享平台，每日会更新最新的需求信息。 无门槛，0中介费，不抽佣！！！可以通过完成新手任务获得更多的查看联系方式次数。"
				}
			}
		},
		computed: {
			completedTasks() {
				return this.bindPhone.completed + this.realname.completed + this.invite.completed + this.verify.completed;
			}
		},
		onLoad(options) {
			this.inviterCode = options.inviterCode || '';
			if (uni.getStorageSync('token'))
				this.getNewAward();
			else
				this.loadLogin();
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getNewAward();
			}
		},
		// 定义页面分享行为
		onShareAppMessage(res) {
			// res.from 来源，button：页面内分享按钮；menu：右上角分享菜单
			if (res.from === 'button') {
				console.log('来自页面内分享按钮');
			} else {
				console.log('来自右上角分享菜单');
			}

			return {
				title: '好友邀请您一起找工作',
				path: '/pages/index/newUser?inviterCode=' + this.inviteCode, // 指定分享后打开的页面路径，必须是以 / 开头的完整路径
				imageUrl: 'https://file.dingdongjipai.com/sansao/file/cert/invite.png', // 自定义分享图片，可以是本地文件路径或者线上图片路径
				success(res) {
					// 分享成功的回调函数
					uni.showToast({
						title: '分享成功'
					});
				},
				fail(err) {
					// 分享失败的回调函数
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			};
		},
		onShareTimeline() {
			let shareParam = 'inviterCode=' + uni.getStorageSync("inviteCode");
			return {
				title: '好友邀请您一起找工作',
				query: shareParam, //分享页面查询参数
				imageUrl: 'https://file.dingdongjipai.com/sansao/file/cert/invite.png', // 自定义分享图片，可以是本地文件路径或者线上图片路径
				success(res) {
					// 分享成功的回调函数
					uni.showToast({
						title: '分享成功'
					});
				},
				fail(err) {
					// 分享失败的回调函数
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			};
		},
		methods: {
			handClick(task) {
				if (task.completed === 0)
					this.doTask(task);
			},
			doTask(task) {
				if ("邀请好友" === task.name) {
					//调用分享接口
					this.shareToFriend();
				} else {
					uni.navigateTo({
						url: task.toPage
					})
				}

			},
			getNewAward() {
				this.$Request.postFormHost(this.$Api.getNewAward).then(res => {
					if (res.status === 0) {
						this.newAward = res.data;
						this.bindPhone.completed = this.newAward.bindPhone;
						this.realname.completed = this.newAward.realname;
						this.invite.completed = this.newAward.invite > 0 ? 1 : 0;
						this.verify.completed = this.newAward.verify;
					}
				})
			},
			// 邀请好友
			shareToFriend() {
				// 调用系统分享菜单
				// 注意：这个方法只会触发onShareAppMessage，
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage']
				});
			},
			sendLoginRequest(code) {
				try {
					const requestData = {
						code: code,
						inviterCode: this.inviterCode
					};

					this.$Request.postFormHost(this.$Api.wxLogin, requestData)
						.then(
							res => {
								if (res.status == 0) {
									// 登录成功处理
									uni.setStorageSync('token', res.data.token);
									uni.setStorageSync("inviteCode", res.data.inviteCode)
									this.getNewAward()
								} else {
									uni.showToast({
										icon: "none",
										title: res.msg
									})
								}
							});
				} catch (error) {
					throw error;
				}
			},
			loadLogin() { //加载的时候获取openId
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						that.sendLoginRequest(loginRes.code)
					}
				});
			}
		}
	}
</script>

<style scoped>
	.onboarding-container {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background: linear-gradient(to bottom, #ffffff, #e73c3c);
		min-height: 100%;
		overflow-y: auto;
	}

	.header {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.header-subtitle {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		text-indent: 2em;
	}

	.tasks-section {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.task-list {
		display: flex;
		flex-direction: column;
	}

	.task-item {
		display: flex;
		align-items: center;
		background-color: #f9f9f9;
		border-radius: 15rpx;
		padding: 20rpx;
		margin-bottom: 15rpx;
		transition: all 0.3s ease;
	}

	.task-number {
		width: 50rpx;
		height: 50rpx;
		background-color: #e73c3c;
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		font-weight: bold;
	}

	.task-details {
		flex-grow: 1;
	}

	.task-name {
		font-size: 28rpx;
		color: #333;
		display: block;
	}

	.task-status {
		font-size: 24rpx;
		color: #888;
	}

	.task-reward {
		background-color: #e73c3c;
		color: white;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	.task-completed {
		background-color: #e6f3e6;
		opacity: 0.7;
	}

	.task-completed .task-number {
		background-color: #e73c3c;
	}

	.progress-container {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.progress-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}

	.progress-bar {
		height: 20rpx;
		background-color: #e0e0e0;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background-color: #e73c3c;
		transition: width 0.5s ease;
	}

	.continue-btn {
		background-color: #e73c3c;
		color: white;
		border-radius: 50rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		margin-top: 20rpx;
	}

	.continue-btn:disabled {
		background-color: #cccccc;
		color: #666;
	}
</style>